<template>
  <div class="chooseSettle">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      @closed="handleClose"
      @opened="getList"
      width="60%"
    >
      <el-alert :title="alertTitle" type="error" :closable="false"> </el-alert>
      <div
        class="ccui-advanced-search-wrapper"
        v-show="areAcrossProject == '1'"
      >
        <el-search
          ref="search"
          :formProp="formData"
          :isShowSearch="true"
          :selectClear="true"
          class="ccui-highsearch"
          :spoNum="2"
          @search="search"
          @resetForm="reset"
        >
          <template slot="search">
            <el-input
              v-model="formData.reportInOrgName"
              clearable
              searchLabel="所属单位"
              @focus="handleSelectTree"
              placeholder="请选择所属单位"
            />
            <el-input
              v-model="formData.warehouseName"
              searchLabel="仓库名称"
              placeholder="请输入仓库名称模糊查询"
              @blur="handleTrim('warehouseName')"
              clearable
            ></el-input>
            <el-input
              v-model="formData.warehouseCode"
              searchLabel="仓库编号"
              placeholder="请输入仓库编号模糊查询"
              clearable
            ></el-input>
            <el-input
                v-model="formData.projectName"
                searchLabel="项目名称"
                clearable
                placeholder="请输入项目名称模糊查询"
            ></el-input>
            <el-input
                v-model="formData.accountingOrgan"
                searchLabel="核算组织"
                clearable
                placeholder="请输入核算组织模糊查询"
            ></el-input>
            <el-input
              v-model="formData.warehousePlace"
              searchLabel="库存地点"
              placeholder="请输入库存地点模糊查询"
              clearable
            ></el-input>
            <el-input
              v-model="formData.warehousePhone"
              searchLabel="联系电话"
              placeholder="请输入联系电话模糊查询"
              clearable
            ></el-input>
          </template>
          <div searchLabel="所属单位" slot="searchItem5" class="reportA">
            <el-input
              placeholder="请输入内容"
              v-model="formData.reportInOrgName"
              disabled
            >
              <template slot="append">
                <el-button
                  v-if="!formData.reportInOrgName"
                  @click="handleSelectTree"
                  >选择</el-button
                >
                <el-button v-else @click="handleRemoveTree">清除</el-button>
              </template>
            </el-input>
          </div>

          <el-input
            v-model="formData.warehouseName"
            searchLabel="仓库名称"
            placeholder="请输入仓库名称模糊查询"
            @blur="handleTrim('warehouseName')"
            clearable
            slot="searchItem1"
          ></el-input>
          <el-input
            v-model="formData.warehouseCode"
            searchLabel="仓库编号"
            placeholder="请输入仓库编号模糊查询"
            clearable
            slot="searchItem2"
          ></el-input>
          <el-input
              v-model="formData.projectName"
              searchLabel="项目名称"
              placeholder="请输入项目名称模糊查询"
              clearable
              slot="searchItem3"
          ></el-input>
          <el-input
              v-model="formData.accountingOrgan"
              searchLabel="核算组织"
              placeholder="请输入核算组织模糊查询"
              clearable
              slot="searchItem4"
          ></el-input>
          <el-input
            v-model="formData.warehousePlace"
            searchLabel="库存地点"
            placeholder="请输入库存地点模糊查询"
            clearable
            slot="searchItem6"
          ></el-input>
          <el-input
            v-model="formData.warehousePhone"
            searchLabel="联系电话"
            placeholder="请输入联系电话模糊查询"
            clearable
            slot="searchItem7"
          ></el-input>
        </el-search>
      </div>
      <div
        class="ccui-advanced-search-wrapper"
        v-show="areAcrossProject == '0'"
      >
        <el-search
          ref="search"
          :formProp="formData"
          :isShowSearch="true"
          :selectClear="true"
          class="ccui-highsearch"
          :spoNum="2"
          @search="search"
          @resetForm="reset"
        >
          <template slot="search">
            <!-- <el-input
                            v-model="formData.reportInOrgName"
                            clearable
                            searchLabel="所属单位"
                            @focus="handleSelectTree"
                            placeholder="请选择所属单位"
                        /> -->
            <el-input
              v-model="formData.warehouseName"
              searchLabel="仓库名称"
              placeholder="请输入仓库名称模糊查询"
              @blur="handleTrim('warehouseName')"
              clearable
            ></el-input>
            <el-input
              v-model="formData.warehouseCode"
              searchLabel="仓库编号"
              placeholder="请输入仓库编号模糊查询"
              clearable
            ></el-input>
            <el-input
                v-model="formData.projectName"
                searchLabel="项目名称"
                clearable
                placeholder="请输入项目名称模糊查询"
            ></el-input>
            <el-input
                v-model="formData.accountingOrgan"
                searchLabel="核算组织"
                clearable
                placeholder="请输入核算组织模糊查询"
            ></el-input>
            <el-input
              v-model="formData.warehousePlace"
              searchLabel="库存地点"
              placeholder="请输入库存地点模糊查询"
              clearable
            ></el-input>
            <el-input
              v-model="formData.warehousePhone"
              searchLabel="联系电话"
              placeholder="请输入联系电话模糊查询"
              clearable
            ></el-input>
          </template>
          <!-- <div
                        searchLabel="所属单位"
                        slot="searchItem5"
                        class="reportA"
                    >
                        <el-input
                            placeholder="请输入内容"
                            v-model="formData.reportInOrgName"
                            disabled
                        >
                            <template slot="append">
                                <el-button
                                    v-if="!formData.reportInOrgName"
                                    @click="handleSelectTree"
                                    >选择</el-button
                                >
                                <el-button v-else @click="handleRemoveTree"
                                    >清除</el-button
                                >
                            </template>
                        </el-input>
                    </div> -->

          <el-input
            v-model="formData.warehouseName"
            searchLabel="仓库名称"
            placeholder="请输入仓库名称模糊查询"
            @blur="handleTrim('warehouseName')"
            clearable
            slot="searchItem1"
          ></el-input>
          <el-input
            v-model="formData.warehouseCode"
            searchLabel="仓库编号"
            placeholder="请输入仓库编号模糊查询"
            clearable
            slot="searchItem2"
          ></el-input>
          <el-input
              v-model="formData.projectName"
              searchLabel="项目名称"
              placeholder="请输入项目名称模糊查询"
              clearable
              slot="searchItem3"
          ></el-input>
          <el-input
              v-model="formData.accountingOrgan"
              searchLabel="核算组织"
              placeholder="请输入核算组织模糊查询"
              clearable
              slot="searchItem4"
          ></el-input>
          <el-input
            v-model="formData.warehousePlace"
            searchLabel="库存地点"
            placeholder="请输入库存地点模糊查询"
            clearable
            slot="searchItem5"
          ></el-input>
          <el-input
            v-model="formData.warehousePhone"
            searchLabel="联系电话"
            placeholder="请输入联系电话模糊查询"
            clearable
            slot="searchItem6"
          ></el-input>
        </el-search>
      </div>
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :dataObj="singleSelectData"
          :data="purchaseListList"
          class="ccui-form-child-table"
          border
          width="600px"
          style="margin-bottom: 20px"
          max-height="800px"
        >
          <el-table-column
            show-overflow-tooltip
            label="序号"
            type="index"
            align="center"
          />

          <el-table-column
            show-overflow-tooltip
            prop="warehouseCode"
            label="仓库编号"
            width="120"
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="warehouseName"
            label="仓库名称"
          >
          </el-table-column>

          <el-table-column
              show-overflow-tooltip
              prop="projectName"
              label="项目名称"
          />
          <el-table-column
              show-overflow-tooltip
              prop="accountingOrgan"
              label="核算组织"
          />

          <el-table-column
            show-overflow-tooltip
            prop="warehousePlace"
            label="库存地点"
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="warehousePhone"
            label="联系电话"
            width="150"
          >
          </el-table-column>

          <el-table-column label="操作" width="50">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="handlecheck(row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <staffSelector
      ref="staffSelector"
      btnText="选择"
      selectedTitle="已选择单位"
      title="请选择单位"
      mode="radio"
      :showBtnTest="false"
      :requestTreeFunction="getQryTree"
      :requestSeachFunction="queryMemberGroup"
      @selectedStaffSuccess="selectStaffSelector"
    />
  </div>
</template>

<script>
import staffSelector from "@/basa/components/public/staffSelector";
import { queryMemberGroup, getQryTree } from "@/basa/api";
import { listScWarehouse } from "../api";
import { getSessionItem } from "@/basa/utils";
export default {
  props: {
    reportInOrgName: {
      type: String
    },
    reportInOrgId: {
      type: Number
    },
    isTrue: {
      type: Boolean
    },
    isAcrossProject: {
      type: Number
    }
  },
  components: { staffSelector },
  data() {
    return {
      title: "选择目标仓库",
      alertTitle: "如需维护仓库信息，请去仓库维护功能菜单进行操作!",
      purchaseListList: [],
      singleSelectData: [],
      dialogVisible: false,
      formData: {
        reportInOrgName: "", //
        reportInOrgId: "", //所属单位
        warehouseCode: "", //仓库名称
        warehouseName: "", //仓库编号
        warehousePlace: "", //库存地点
        warehousePhone: "", //联系电话
        projectName: "", //项目名称
        accountingOrgan: "", //核算组织
      },
      formDataSearch: {
        reportInOrgName: "",
        reportInOrgId: "", //所属单位
        warehouseName: "",
        warehouseCode: "",
        warehousePhone: "",
        warehousePlace: "",
        projectName: "", //项目名称
        accountingOrgan: "", //核算组织
      },
      areAcrossProject: null,
      noAccrossOrgId: "",
      noAccrossOrgName: ""
    };
  },
  methods: {
    getList() {
      this.areAcrossProject = this.isAcrossProject;
      console.log(this.areAcrossProject);
      if (this.areAcrossProject == "0") {
        this.formData.reportInOrgId = this.reportInOrgId;
        this.formData.reportInOrgName = this.reportInOrgName;
        this.getContractList(this.formData);
      }
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.formData,
        key,
        this.formData[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    showContractList() {
      this.dialogVisible = true;
      this.getContractList(this.formData);
    },
    getContractList(data) {
      listScWarehouse({
        ...data
        // reportInOrgId: this.reportInOrgId,
      }).then(res => {
        this.purchaseListList = res.data.data;
      });
    },
    handlecheck(row) {
      this.$emit("getAim", row);
      this.dialogVisible = false;
    },
    handleClose() {},
    // 选择所属单位
    handleSelectTree() {
      this.$refs.staffSelector.isShow = true;
    },
    // 清空所属单位
    handleRemoveTree() {
      this.formData.reportInOrgId = "";
      this.formData.reportInOrgName = "";
    },
    // 获取选择的所属单位
    selectStaffSelector([data], orgTypes, orginName, node) {
      this.noAccrossOrgId = data.orgId;
      this.noAccrossOrgName = data.name;
      if (data.orgId == this.reportInOrgId) {
        this.$confirm("当前所选仓库不属于跨项目移库，是否继续选择？", "提示", {
          distinguishCancelAndClose: true,
          confirmButtonText: "是",
          cancelButtonText: "否",
          customClass: "ccui-message-box-custom"
        })
          .then(() => {
            this.formData.reportInOrgId = data.orgId;
            this.formData.reportInOrgName = data.name;
            this.dialogVisible = true;
            this.getContractList(this.formData);
            this.$emit("getAccrossProject", 0);
          })
          .catch(() => {});
      } else {
        this.formData.reportInOrgId = data.orgId;
        this.formData.reportInOrgName = data.name;
        this.dialogVisible = true;
        this.getContractList(this.formData);
      }
    },
    // 高级搜索展开按钮
    search(searchData) {
      this.formDataSearch = JSON.parse(JSON.stringify(searchData));
      if (this.isAcrossProject == "0") {
        this.formDataSearch.reportInOrgId = getSessionItem("userInfo", "orgId");
        this.formDataSearch.reportInOrgName = getSessionItem(
          "userInfo",
          "orgName"
        );
      } else {
        this.formDataSearch.reportInOrgId = this.formData.reportInOrgId;
        this.formDataSearch.reportInOrgName = this.formData.reportInOrgName;
      }
      this.getContractList(this.formDataSearch);
    },
    reset() {
      if (this.areAcrossProject == "0") {
        this.formData.warehouseCode = "";
        this.formData.warehouseName = "";
        this.formData.warehousePlace = "";
        this.formData.warehousePhone = "";
        this.formData.reportInOrgId = this.reportInOrgId;
        this.formData.reportInOrgName = this.reportInOrgName;
      } else {
        this.formData.warehouseCode = "";
        this.formData.warehouseName = "";
        this.formData.warehousePlace = "";
        this.formData.warehousePhone = "";
        this.formData.reportInOrgId = this.noAccrossOrgId;
        this.formData.reportInOrgName = this.noAccrossOrgName;
      }
    },
    queryMemberGroup,
    getQryTree
  }
};
</script>

<style lang="scss" scoped>
.chooseSettle {
  display: inline-block;
}
/deep/.el-single-select
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-dialog-box
  .dialog-top {
  justify-content: space-between;
}
/deep/ .el-table__body-wrapper {
  max-height: 230px !important;
}
/deep/.label {
  display: inline-block;
  width: 130px !important;
  text-align: right;
}
// /deep/ .el-dialog__footer {
//   border-top: none;
// }
// /deep/ .el-table td,
// .el-table th {
//   padding: 5px 0 !important;
// }
// /deep/ .disabledBtn {
//   // border: 1px solid #999 !important;
//   span {
//     color: #999 !important;
//   }
// }

/deep/ .ccui-advanced-search-wrapper .el-search {
  margin-top: 15px;
}
/deep/.el-form-item {
  margin-bottom: 15px !important;
}
/deep/.el-search .el-searchs {
  float: none;
}
/deep/.el-searchs-box {
  margin: 0 auto;
}
// /deep/ .el-dialog__header .el-dialog__title{
//   line-height: 30px !important;
// }
/deep/ .ccui-search-wrapper .el-searchs .el-input {
  width: 200px !important;
}
.reportA {
  /deep/ .el-button {
    background: #f7f9ff;
    border: 1px solid #0089ef;
    &:hover {
      background-color: #fff;
      border-color: #5576cf;
      color: #fff;
    }
    span {
      color: #0089ef;
      font-size: 13px;
      font-weight: 500;
    }
  }
}
/deep/ .ccui-advanced-search-wrapper .el-search {
  margin-top: 15px;
}
/deep/.el-form-item {
  margin-bottom: 15px !important;
}
/deep/.el-search .el-searchs {
  float: none;
}
/deep/.el-searchs-box {
  margin: 0 auto;
}
</style>
